<template>
	<view class="actions">
		<text @click.stop="action('can')">-</text>
		<!-- <input v-model="num" @click.stop readonly/> -->
		<text @click.stop>{{num}}</text>
		<text @click.stop="action('add')">+</text>
	</view>
</template>

<script>
	export default {
		props: {
			dataNum: {
				type: [String, Number],
				default: 1
			},
			min: {
				type: [String, Number],
				default: 1
			},
			max: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
				num: 1
			}
		},
		watch: {
			dataNum: {
				handler(val) {
					this.num = val || 0
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			action(type) {
				if(type === 'can') {
					let min = Number(this.min)
					if(min && this.num<=min) {
						return uni.showToast({
							title: '此产品最低购买数量' + this.min,
							icon: 'none'
						})
					}
					if(this.num === 1) return
					this.num --
				}  else {
					let max = Number(this.max)
					if(max && this.num >= max) {
						this.num = this.max
						return uni.showToast({
							title: '此产品限制购买数量' + this.max,
							icon: 'none'
						})
					}
					this.num ++
				}
				this.$emit('nums', this.num)
			}
		}
	}
</script>

<style scoped lang="scss">
.actions {
	display: flex;
	align-items: center;
	border: 1px solid #C0C0C0;
	border-radius: 10upx;
	overflow: hidden;
	height: 48upx;
	>text {
		display: inline-block;
		width: 45upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		font-size: 36upx;
		color: #000000;
		font-weight: bold;
	}
	>text:nth-of-type(1) {
		color: #969696 !important;
	}
	text {
		display: inline-block;
		width: 55upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #000000;
		background: transparent;
		border-left: 1px solid #E9E9E9;
		border-right: 1px solid #E9E9E9;
	}
	input {
		width: 55upx;
		height: 100%;
		font-size: 24upx;
		color: #000000;
		text-align: center;
		background: transparent;
		border-left: 1px solid #E9E9E9;
		border-right: 1px solid #E9E9E9;
	}
}
</style>